{% from 'macros/icon.njk' import icon with context %}

<navigation-tree role="navigation" class="flex-shrink-none" aria-label="{{ 'i18n.common.project_docs' | i18n(locale) }}" tabindex="-1">
  <div class="display-flex lg:display-none align-center pad-200 hairline-bottom">
    <button class="navigation-tree__back button display-flex align-center justify-content-center width-700 height-700" aria-label="{{ 'i18n.common.back' | i18n(locale) }}">
      {{ icon('arrow-back', {hidden: true}) }}
    </button>
    {% set projectPost = helpers.findByProjectKey(collections.all, project_key, locale) %}
    <div class="navigation-tree__title pad-left-200 pad-right-200 user-select-none">{{ projectPost.data.title }}</div>
  </div>

  <div class="display-flex direction-column pad-top-300 lg:pad-top-200 pad-right-200 lg:pad-right-0">
    {# Render nested sections. #}
    {% from 'macros/navigation-tree-sections.njk' import navigationTreeSections with context %}
    {{ navigationTreeSections() }}
  </div>

{% set additionalClasses = 'display-none md:display-block xl:display-none pad-right-400' %}
{% include 'partials/toc-side.njk' %}

</navigation-tree>
